<script setup lang="ts">
import type { Props, Emits } from './utils/types'
defineProps<Props>()

const $emit = defineEmits<Emits>()

const activeIndex = shallowRef(0)

// 可以做 on-change 或者 v-model 后期调用接口写这里
// $emit('on-change')


watch(activeIndex, (newValue) => {
    console.log(newValue)
}, { immediate: true })

</script>

<template>
    <div class="type">
        <div class="label">{{ label }}</div>
        <div class="value" v-for="(item, index) in value" :key="index" :class="{ active: index == activeIndex }" @click="activeIndex = index">{{ item.label }}</div>
    </div>
</template>

<style lang="scss" scoped>
.type {
    display: flex;

    div.active {
        background-color: rgba(249, 20, 20, 1);
        color: #ffffff;
        font-size: 14px;
    }

    .value {
        color: rgba(140, 142, 143, 1);
        font-size: 14px;
        margin-right: 14px;
        padding: 0 8px;
        border-radius: 5px;
        cursor: pointer;
    }

    .label {
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
    }
}
</style>